@import './base/fn.less';
@dialogPrefixCls: oreo-dialog;
.@{dialogPrefixCls} {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: @fill-base;
    width: 270px;
    color: @color-text-base;
    z-index: @dialog-zindex;
    .@{dialogPrefixCls}__title {
        // font-weight: 600;
        font-size: @font-size-display-sm;
    }
    .@{dialogPrefixCls}__text {
        color: @color-text-caption;
        margin-top: @v-spacing-sm;
    }
    .@{dialogPrefixCls}__input {
        position: relative;
        input {
            width: 100%;
            height: 32px;
            border: none;
            font-size: @font-size-base;
            padding: 0 @h-spacing-sm;
        }
        &:after {
            .setBottomLine(@border-color-base);
        }
    }
    .@{dialogPrefixCls}__buttons {
        position: relative;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        overflow: hidden;
        box-sizing: border-box;
        .@{dialogPrefixCls}__button {
            flex: 1;
            &:not(:first-child) {
                &:before {
                    .setLeftLine(@border-color-base);
                }
            }
        }
    }
    .@{dialogPrefixCls}__buttons_vertical {
        flex-direction: column;
        .@{dialogPrefixCls}__button {
            width: 100%;
            &:not(:first-child) {
                &:before {
                    .setTopLine(@border-color-base);
                }
            }
        }
    }
    .@{dialogPrefixCls}__button {
        position: relative;
        display: block;
        text-align: center;
        text-decoration: none;
        outline: none;
        font-size: @font-size-headline;
        color: @brand-primary;
        text-transform: uppercase;
        width: auto;
        .setHeight(@option-height);
        .textOverflow();
        .box-sizing();
        &_bold {
            // font-weight: 700;
        }
    }
}

.@{dialogPrefixCls}_ios {
    border-radius: 6px;
    overflow: hidden;
    .@{dialogPrefixCls}__inner {
        padding: 15px;
        position: relative;
        background: @fill-base;
        &:after {
            .setBottomLine(@border-color-base);
        }
    }
    .@{dialogPrefixCls}__title {
        text-align: center;
    }
    .@{dialogPrefixCls}__text {
        text-align: center;
    }
    .@{dialogPrefixCls}__field {
        margin-top: @v-spacing-lg; // border: 1px solid rgba(0, 0, 0, .3);
        border: 1Px solid @border-color-base; // box-shadow: 0 0 0 1px  @border-color-base;
        border-radius: 2px;
    }
    .@{dialogPrefixCls}__input {
        &:last-child {
            .removeRightOrBottomLine();
        }
    }
    .@{dialogPrefixCls}__buttons {
        display: flex;
        justify-content: center;
        align-items: center; // .@{dialogPrefixCls}__button {
        // }
    }
}

.@{dialogPrefixCls}_android {
    width: 280px;
    border-radius: @radius-sm;
    overflow: hidden;
    box-shadow: 0 19px 38px rgba(0, 0, 0, .3), 0 15px 12px rgba(0, 0, 0, .22);
    .@{dialogPrefixCls}__inner {
        padding: 24px 24px 20px;
        position: relative;
        .removeRightOrBottomLine();
    }
    .@{dialogPrefixCls}__title {
        text-align: left;
    }
    .@{dialogPrefixCls}__text {
        text-align: left;
    }
    .@{dialogPrefixCls}__field {
        margin-top: 16px;
        position: relative;
        border: none;
    }
    .@{dialogPrefixCls}__input {
        position: relative;
        input {
            width: 100%;
            height: 36px;
        }
    }
    .@{dialogPrefixCls}__buttons {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 48px;
        padding: 6px 8px;
        .@{dialogPrefixCls}__button {
            flex: inherit;
            padding: 0 8px;
            width: auto;
            min-width: 64px;
            .setHeight(36px);
            &:not(:first-child) {
                .removeLeftOrTopLine();
            }
        }
    }
}

.@{dialogPrefixCls}-zoom {
    &-enter-active {
        animation: oreo-dialog-zoom-in 0.4s cubic-bezier(0.55, 0, 0.1, 1);
    }
    &-leave-active {
        animation: oreo-fade-out 0.4s cubic-bezier(0.55, 0, 0.1, 1);
    }
}

@keyframes oreo-dialog-zoom-in {
    0% {
        transform: translate(-50%, -50%) scale(0);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
    }
    100%{
        transform: translate(-50%, -50%) scale(1);
    }
}